<template>
  <view class="main">
    <!-- <view>上传相关图片</view>
  <view class="imgbox">
    <view class="icon icon-tupian"></view>
    <view>选择图片</view>
  </view> -->
    <uni-forms>
      <uni-forms-item>
        <view class="ratestyle">
          <view style="display: flex;align-items: center;margin-bottom: 20rpx;">
            <view class="line"></view>
            <text class="text_style">请评分</text>
          </view>
          <uni-rate v-model="rateValue" @change="onChange" />
        </view>
      </uni-forms-item>
      <uni-forms-item>
        <view style="display: flex;align-items: center;margin-bottom: 20rpx;">
          <view class="line"></view>
          <view>填写您的意见或建议</view>
        </view>
        <view style="position: relative;">
          <textarea class="textarea" placeholder="说出您的意见或建议" :value="evaluationContent" @input="onInput" maxlength="80" />
          <text class="word">{{ evaluationContent.length }} / 80</text>
        </view>


      </uni-forms-item>
    </uni-forms>




    <!-- 底部 -->
    <view class="footer">
      <view class="contact" @click="onContact">联系食堂</view>
      <button class="submit" @click="onSubmit" :loading="loading">{{ loading ? '' : '提交' }}</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { http } from '../../utils/http';
import { useMemberStore } from '../../stores';
import { onLoad } from '@dcloudio/uni-app';
const evaluationContent = ref('')//建议
const rateValue = ref(5)//评分值
const userStore = useMemberStore()
const loading = ref(false)
// 用户一进来评分值恢复为初始值
onLoad(()=>{
  rateValue.value=5
  evaluationContent.value = ''
})
// 评分事件
const onChange = (e) => {
  rateValue.value = e.value
}
// 文本域输入事件
const onInput = (e) => {
  evaluationContent.value = e.detail.value
  if (evaluationContent.value.length == 80) {
    uni.showToast({ title: '已超出最大字符数80哦~', icon: 'none', duration: 2000 })
  }
}
// 新增用户评价
const addNewEvaluationInfo = async (evaluationStar, evaluationContent) => {
  const res = await http({
    method: 'post',
    url: '/AddNewEvaluationInfo',
    data: {
      ...userStore.requestData,
      data: {
        customerSerials: userStore.profile.customerSerials,
        customerId: userStore.profile.customerId,
        customerName: userStore.profile.customerName,
        orderNo: " ",
        evaluationStar,
        evaluationContent
      }
    }
  })
  if (res.errcode == 0) {
    loading.value = false
    uni.showToast({ title: '您已评价成功', icon: 'success', duration: 2000 })
    setTimeout(() => {
      uni.switchTab({ url: '/pages/home/home' })
    }, 500)
  }else{
    loading.value=false
    uni.showToast({title:res.errmsg,icon:'none',duration:2000})
  }
}

// 联系食堂按键
const onContact = () => {
  uni.showModal({
    title: '确认拨打食堂电话',
    content: userStore.profile.stPhone,
    success: (result) => {
      if (result.confirm) {
        uni.makePhoneCall({
          phoneNumber: userStore.profile.stPhone
        })
      }
    }
  });

}
// 意见提交
const onSubmit = async () => {
  if (loading.value) return uni.showToast({ title: '请勿重复提交', icon: 'none' ,duration:2000})
  if (evaluationContent.value.length == 0) {
    return uni.showToast({ title: '亲，请评价~', icon: 'none',duration:2000 })
  }
  loading.value = true
  await addNewEvaluationInfo(rateValue.value.toString(), evaluationContent.value)
 
}
</script>

<style scoped lang="scss">
.line {
  width: 13rpx;
  height: 70rpx;
  background-color: #007aff;
  border-radius: 50rpx;
  margin: 0 10rpx;
}

.word {
  position: absolute;
  right: 18rpx;
  bottom: 18rpx;
  font-size: 38rpx;
}

.main {
  width: 100%;
  height: 100%;
  padding: 30rpx 40rpx;
  box-sizing: border-box;

  .textarea {
    width: 100%;
    height: 600rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    background-color: #eee;

  }

  .imgbox {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    margin: 20rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #eeeeee;
  }

  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20rpx 0;
  }

  .right {
    display: flex;
    align-items: center;
  }

  .footer {
    position: fixed;
    display: flex;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100rpx;

    .contact {
      flex: 1;
      text-align: center;
      line-height: 100rpx;
      background-color: #f1f1f1;
    }

    .submit {
      flex: 1;
      text-align: center;
      line-height: 100rpx;
      background-color: #2979ff;
      color: #fff;
      border-radius: 0;
    }
  }

}
</style>

